import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/ute/uteped_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'logic.dart';

class LanguagePage extends StatelessWidget {
  LanguagePage({super.key});

  final logic = Get.find<LanguageLogic>();
  final state = Get.find<LanguageLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => Get.back()),
        centerTitle: true,
        title: Text(LocaleKeys.settings_language.ts, style: TextStyle(fontSize: 54.sp)),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 42.w),
        child: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(height: 60.h),
              Container(
                height: 247.h,
                padding: EdgeInsets.only(left: 43.w, right: 20.w),
                decoration: BoxDecoration(color: Colors.white70.withOpacity(0.8), borderRadius: BorderRadius.circular(60.r)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(LocaleKeys.device_language.ts, style: TextStyle(fontSize: 42.sp)),
                    Obx(
                      () => Transform.scale(
                        scaleY: 0.7,
                        scaleX: 0.7,
                        child: CupertinoSwitch(
                          activeColor: Colors.red,
                          value: state.followSysLang.value,
                          onChanged: (value) => logic.setFollowSysLang(value),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 50.h),
              GetBuilder<LanguageLogic>(
                id: 'language_list',
                builder: (_) => Container(
                  padding: EdgeInsets.only(left: 43.w, right: 40.w),
                  decoration: BoxDecoration(
                    color: Colors.white70.withOpacity(0.8),
                    borderRadius: BorderRadius.circular(60.r),
                  ),
                  child: ListView.separated(
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemBuilder: (context, index) => _.state.languages.map(_buildSettingsItem).toList()[index],
                    separatorBuilder: (context, index) => Container(
                      height: 1.h,
                      color: Colors.grey.withOpacity(0.3),
                    ),
                    itemCount: _.state.languages.length,
                  ),
                ),
              ),
              SizedBox(height: 60.h),
            ],
          ),
        ),
      ),
    );
  }

  _buildSettingsItem(item) {
    return SizedBox(
      height: 240.h,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(item[UTEPedConst.keyName], style: TextStyle(fontSize: 42.sp)),
          Transform.scale(
            scaleY: 1.2,
            scaleX: 1.2,
            child: Obx(
              () => Radio(
                value: item[UTEPedConst.keyLanguage],
                groupValue: state.selectedLang.value,
                onChanged: (language) => logic.onLanguageSelected(language, item),
                activeColor: Colors.red,
                toggleable: true,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
